import { ScrollView, View, Image, Text } from '@tarojs/components'
import React, { useEffect, useState } from 'react'
import './index.scss'
import Taro from '@tarojs/taro'

interface CommentProps {
  commentShow: boolean
  id: number
  hide: () => void
}

const Comment: React.FC<CommentProps> = ({ commentShow, id, hide }) => {
  return (
    <>
      <View
        style={{
          bottom: commentShow ? '0' : '100vh',
        }}
        className="comment_marsk"
        onClick={e => {
          e.stopPropagation()
          hide()
        }}
      />
      <View
        style={{
          opacity: commentShow ? '1' : '0',
          bottom: `${commentShow ? '0' : '-70vh'}`,
        }}
        className="comment_content"
      >
        {/* 评论内容 */}
        <View className="comment_header">
          <View className="title">40条评论</View>
        </View>
        <ScrollView
          scroll-y
          style={{
            width: '100%',
            height: ` calc(70vh - 100rpx)`,
          }}
        >
          <View className="list">
            {Array(40)
              .fill(1)
              .map((item, index) => {
                return (
                  <View key={index} className="item">
                    <View className="item_content">
                      <Image src="https://pic.imgdb.cn/item/63fca023f144a01007242e89.jpg" />
                      <View className="right">
                        <View className="nick_name">小橘子</View>
                        <View className="desc">
                          有认识大湖地区为活动前我i大窘气温较低哦却无法去哈佛权威的请叫我i额
                        </View>
                        <View className="time">
                          2021-09-20 <Text>回复</Text>
                        </View>
                        <View className="pl">
                          —— <Text>展开3426条评论</Text>
                        </View>
                      </View>
                    </View>
                  </View>
                )
              })}
          </View>
        </ScrollView>
      </View>
    </>
  )
}
export default Comment
